<template>
  <div>
    <tableComponents :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" @sendUserSearch="getSearch"
      :searchData="userSearchData" :isHaveExport="false" :isHaveAdd="false" :HeadShow="false">
      <template v-slot:searchBottom>
        <el-form class="search_prod search_prod1" label-width="94px">
          <el-form-item label="活动类型">
            <el-row class="tl mar_bottom_15">
              <el-radio-group v-model="types" class="tl money-group">
                <el-radio-button label="0"> 普通商品 </el-radio-button>
                <el-radio-button v-for="(item, i) in activity_option" :label="i" :key="i">
                  {{ item }}
                </el-radio-button>
              </el-radio-group>
            </el-row>
          </el-form-item>
          <el-form-item label="商品类型">
            <el-row class="tl mar_bottom_15">
              <el-radio-group v-model="status" class="tl money-group">
                <el-radio-button label=""> 全部商品 </el-radio-button>
                <el-radio-button label="1"> 出售中 </el-radio-button>
                <el-radio-button label="2"> 已售罄库存 </el-radio-button>
                <el-radio-button label="3"> 仓库中 </el-radio-button>
              </el-radio-group>
            </el-row>
          </el-form-item>
        </el-form>
        <el-row style="text-align: left; padding: 10px 20px 0">
          <el-button type="primary" :loading="$store.state.isLoading" @click="seleltShopAll">添加全部商品</el-button>
          <el-button type="warning" :loading="$store.state.isLoading" v-if="multipleSelection.length > 0"
            @click="seleltMultiple">添加选中商品</el-button>
        </el-row>
      </template>
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list.data" v-loading="loading" header-row-class-name="head_color" stripe
          tooltip-effect="dark" style="width: 99.9%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"></el-table-column>

          <el-table-column label="图片" width="140">
            <template slot-scope="scope">
              <img style="width: 100px" :src="$fnc.getImgUrl(scope.row.piclink)" />
            </template>
          </el-table-column>
          <el-table-column label="名称" min-width="200">
            <template slot-scope="scope">
              <p>{{ scope.row.title }}</p>
              <div v-if="scope.row.label && scope.row.label.length > 0">
                <el-tag v-for="(label, l) in scope.row.label" style="margin-right: 5px; color: #ffffff; margin-left: 0"
                  size="mini" :key="l" effect="dark">
                  {{ label }}
                </el-tag>
              </div>
              <div style="margin-top: 5px">
                <el-tag style="margin-right: 5px; color: #ffffff; margin-left: 0" size="mini" effect="dark"
                  :type="scope.row.show == 1 ? 'success' : 'danger'">
                  {{ scope.row.show == 1 ? "已上架" : "未上架" }}
                </el-tag>
                <el-tag style="margin-right: 5px; color: #ffffff; margin-left: 0" size="mini" effect="dark"
                  :type="scope.row.is_check == 1 ? 'success' : 'danger'">
                  {{ scope.row.is_check == 1 ? "已审核" : "未审核" }}
                </el-tag>
              </div>
              <div v-show="scope.row.admin_account" style="margin-top: 5px">
                <span>上传管理员：</span>
                <span>{{ scope.row.admin_account }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="价格信息" min-width="150">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>售价：</span>
                  <small>{{ scope.row.price }}</small>
                </p>
                <p>
                  <span>成本价：</span>
                  <small>{{ scope.row.cost_price }}</small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="库存信息" min-width="150">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>库存总量：</span>
                  <small>{{ scope.row.stock }}</small>
                </p>
                <p>
                  <span>商品规格：</span>
                  <small>{{
                    scope.row.sku_id > 0 ? "多规格" : "单商品"
                  }}</small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button :loading="$store.state.isLoading" size="mini" @click="addShops(scope.row)">
                添加
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
  </div>
</template>

<script>
import { productListsSearchData } from "@/assets/js/searchData/searchData";
export default {
  data() {
    return {
      userSearchData: productListsSearchData,
      searchAll: {},
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      multipleSelection: [],
      activity_option: {},
      types: this.$route.query.types || 0,
      status: '',
    };
  },
  mounted() {
    this.getNewsAll();
    this.get_activity_option();
  },
  methods: {
    seleltShopAll() {
      var params = {};
      params = JSON.parse(JSON.stringify(this.searchAll));
      params.page = 1;
      params.page_size = this.list.all_num;
      params.types = this.types;
      params.is_operation_stock = 1;
      if (this.status == 1) {
        params.show = 1;
        params.stock = "";
        params.is_check = 1;
      } else if (this.status == 2) {
        params.stock = 0;
        params.show = "";
      } else if (this.status == 3) {
        params.show = 0;
        params.stock = "";
      } else if (this.status == 4) {
        params.show = 0;
        params.stock = "";
      } else if (this.status == 5) {
        params.is_check = 3;
      }
      this.$api.getShops.getShopsList(params).then((res) => {
        if (res.data.code == 200) {
          let list = res.data.result.data || [];
          for (let i of list) {
            this.$emit("sendItem", i);
          }
          this.$emit("close");
        } else {
          this.$fnc.alerterror(res.data.result);
        }
      });
    },
    seleltMultiple() {
      let list = this.multipleSelection;
      for (let i of list) {
        this.$emit("sendItem", i);
      }
      this.$emit("close");
    },
    addShops(item) {
      this.$emit("sendItem", item);
    },
    get_activity_option() {
      this.$api.getShops.get_activitylist({}).then((res) => {
        if (res.data.code == 200) {
          this.activity_option = res.data.result;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll();
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getNewsAll();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getNewsAll();
    },
    getNewsAll() {
      this.loading = true;
      var params = {};
      params = JSON.parse(JSON.stringify(this.searchAll));
      params.page = this.currentPage;
      params.page_size = this.pageSize;
      params.types = this.types;
      params.is_operation_stock = 1;

      if (this.status == 1) {
        params.show = 1;
        params.stock = "";
        params.is_check = 1;
      } else if (this.status == 2) {
        params.stock = 0;
        params.show = "";
      } else if (this.status == 3) {
        params.show = 0;
        params.stock = "";
      } else if (this.status == 4) {
        params.show = 0;
        params.stock = "";
      } else if (this.status == 5) {
        params.is_check = 3;
      }
      this.$api.getShops.getShopsList(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        } else {
          this.$fnc.alerterror(res.data.result);
        }
        this.loading = false;
      });
    },
  },
  watch: {
    types() {
      this.getNewsAll();
    },
    status() {
      this.getNewsAll();
    },
  },
};
</script>

<style></style>